<template>
  <div class="location">
    <div class="qin">
      <div id="toubu">
        <span @click="go0ff()"> < 返回</span>修改增加收货地址
      </div>
    </div>
    <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      save-button-text="添加地址"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
    <van-button type="primary" block @click="eee">修改收货地址</van-button>
  </div>
</template>

<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import {
  addAddress,
  delAddress,
  getSingleAddressID,
  changeAddress,
} from "../../api/address";

export default {
  data() {
    return {
      show: false,
      id: "",
      areaList,
      addressInfo: {
        // name: "",
        // tel: "",
        // province: "",
        // city: "",
        // addressDetail: "",
        // isDefault: true,
        // postalCode: 123456,
      },
    };
  },
  computed: {},
  watch: {
    
  },

  methods: {
    //头顶上那个返回按钮
    go0ff() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    //保存按钮
    async onSave(content) {
      console.log("content", content);
      this.addressInfo = content;

      this.$store.commit("address/changereceiver", content.name);
      this.$store.commit(
        "address/changeregions",
        content.province + "/" + content.city + "/" + content.county
      );
      this.$store.commit("address/changeaddress", content.addressDetail);
      this.$store.commit("address/changemobile", content.tel);
      localStorage.setItem(
        "address",
        JSON.stringify({
          receiver: content.name,
          regions: content.province + "/" + content.city + "/" + content.county,
          address: content.addressDetail,
          mobile: content.tel,
        })
      );
      const aaa = await addAddress({
        receiver: this.addressInfo.name,
        mobile: this.addressInfo.tel,
        regions: this.addressInfo.province,
        address: this.addressInfo.addressDetail,
        idDefault: true,
      });
      //
      console.log(aaa);
      this.$router.push("/address");
    },

    ///删除按钮
    async onDelete() {
      this.del();
      this.$router.push("/address");
    },
    onChangeDetail(val) {
      console.log(val);
    },
    //调用删除接口
    async del() {
      const del = await delAddress(this.id);
      console.log(del);
    },

    //点进来的时候显示点击的那个收货地址
    async init() {
      const res = await getSingleAddressID(this.id);
      var obj = {
        name: "",
        tel: "",
        addressDetail: "", //详细住址
        province: "", //省份
        city: "", //城市
        county: "", //区县
        postalCode: "", //邮政编码
        areaCode: "", //地区
        isDefault: "", //是否是默认收货
      };
      obj.name = res.receiver;
      obj.tel = res.mobile;
      obj.addressDetail = res.address;
      obj.province = res.regions;
      obj.isDefault = res.isDefault;
      // console.log(obj);
      this.addressInfo = obj;
    },
    //修改收货地址按钮
    async eee() {
      let data = {
        receiver: this.addressInfo.name,
        mobile: this.addressInfo.tel,
        regions: this.addressInfo.province,
        address: this.addressInfo.addressDetail,
        idDefault: this.addressInfo.isDefault,
      };
      // console.log(this.addressInfo);
      const aaa = await changeAddress(this.id, {
        receiver: this.addressInfo.name, //收货人姓名
        mobile: this.addressInfo.tel, //手机号
        regions: this.addressInfo.province, // 地区信息(河南省-郑州市-二七区)
        address: this.addressInfo.addressDetail, //  详细地址(航海路1290号)
        idDefault: this.addressInfo.isDefault, //是否默认(true/false)
        
      });

      console.log(data);
      console.log(aaa);
      
    },
    
  },
  created() {
    //拿到点击的那个地址id
    this.id = this.$route.query.id;
    this.init();
  },
  mounted() {
    this.id = this.$route.query.id;
  },
  components: {},
};
</script>
<style scoped>
.qin {
  width: 100%;
  height: 50px;
  background: white;
}
#toubu {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  position: relative;
}
#toubu > span {
  position: absolute;
  font-size: 14px;
  line-height: 50px;
  color: blue;
  left: 10px;
}
</style>
